<template>
  <view class="service-team">
    <!-- 头部区域 -->
    <view class="team-header">
      <text class="title">合作服务团队</text>
      <template v-if="teamList.length == 0">
        <view class="add-btn" @tap="navigateToAdd">+ 去添加</view>
      </template>
      <template v-else>
        <view class="more" @tap="navigateToMore">查看更多 >></view>
      </template>
    </view>

    <!-- 列表区域 -->
    <view v-if="teamList.length > 0" class="team-list">
      <view 
        v-for="team in teamList" 
        :key="team.id" 
        class="team-item"
      >
        <view class="team-info">
          <text class="team-name">{{ team.name }}</text>
          <text class="team-desc">{{ team.description }}</text>
        </view>
        <view class="contact-btn" @tap="handleContact(team)">电话咨询</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  teamList: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['contact'])

// 跳转到添加页面
const navigateToAdd = () => {
	uni.navigateTo({
	  url: '/pages/gvr-service-repair/gvr-service-repair-list'
	})
}

// 跳转到更多页面
const navigateToMore = () => {
  uni.navigateTo({
    url: '/pages/gvr-service-repair/gvr-service-repair-list'
  })
}

// 处理联系
const handleContact = (team) => {
  emits('contact', team)
}
</script>

<style lang="scss" scoped>
.service-team {
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
  border-radius: 20rpx;
  padding: 32rpx 42rpx;
  margin-bottom: 20rpx;
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;

  .title {
   font-family: PingFangSC-Medium;
   font-size: 28rpx;
   color: #000000;
   letter-spacing: 0;
   font-weight: 500;
  }

  .add-btn {
    padding: 6rpx 24rpx;
    background: #FAC653;
    border-radius: 10rpx;
    font-family: PingFangSC-Medium;
    font-size: 24rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }

  .more {
    font-family: PingFangSC-Light;
    font-size: 20rpx;
    color: #515151;
    letter-spacing: 0;
    font-weight: 200;
  }
}

.team-list {
  .team-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .team-info {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
      .team-name {
	   font-family: PingFangSC-Medium;
	   font-size: 24rpx;
	   color: #000000;
	   letter-spacing: 0;
	   font-weight: 500;
      }

      .team-desc {
        font-family: PingFangSC-Light;
        font-size: 20rpx;
        color: #236192;
        letter-spacing: 0;
        font-weight: 200;
      }
    }

    .contact-btn {
      padding: 6rpx 24rpx;
      background: #FAC653;
	  border-radius: 10rpx;
      font-family: PingFangSC-Medium;
      font-size: 24rpx;
      color: #000000;
      letter-spacing: 0;
      text-align: center;
      font-weight: 500;
    }
  }
}
</style> 